<!DOCTYPE html>
<html>
<head>
    <title>会议管理</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h2>会议管理</h2>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加会议</button>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>序号</th>
                <th>会议标题</th>
                <th>地点</th>
                <th>开始时间</th>
                <th>参会人员</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
                <td>Pitt</td>
                <td>35</td>
                <td>New York</td>
                <td>New York</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>




<!-- 添加会员 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">创建会议</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class="container">

                    <form>
                        <div class="form-group">
                            <label >会议标题:</label>
                            <input type="text" class="form-control" id="titleinput" placeholder="会议标题">
                        </div>
                        <div class="form-group">
                            <label >会议地点:</label>
                            <textarea class="form-control" rows="5" id="addressinput"></textarea>
                        </div>
                        <div class="form-group">
                            <label >会议开始时间:</label>
                            <input type="datetime-local" class="form-control" id="starttimeinut" placeholder="会议开始时间">
                        </div>
                    </form>
                </div>



            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="addbtn">提交</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>

<script>
$(document).ready(function(){
    $("#addbtn").click(function(){
        var data =  {"address" :$("#addressinput").val(),"startTime" : $("#starttimeinut").val(),"tile" :$("#titleinput").val()}
        $.ajax({
            url : "/report/meeting/add",
            async : false,
            type : "POST",
            contentType : 'application/json',
            dataType : 'json',
            data :JSON.stringify(data),
            success : function(data) {
                alert("Data Loaded: " + data.msg);
            }
        });
    })

});
</script>

</body>
</html>